<template>
  <div class="app-container">
    <h3>组卷信息</h3>
    <el-card style="margin-top: 20px">
      <div>
        <el-table :data="repoList" :border="false"  style="width: 100%; margin-top: 15px" >
          <el-table-column label="科目" width="200" prop="name">
          </el-table-column>

          <el-table-column label="单选数量" align="center" >

            <template slot-scope="scope">
              <el-input-number v-model="scope.row.radio" :min="0" :max="scope.row.radioCount" :controls="false" style="width: 100px" /> / {{ scope.row.radioCount }}
            </template>

          </el-table-column>

          <el-table-column label="多选数量" align="center" >
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.multi" :min="0" :max="scope.row.multiCount" :controls="false" style="width: 100px" /> / {{ scope.row.multiCount }}
            </template>
          </el-table-column>

          <el-table-column label="填空题数量" align="center" >
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.blank" :min="0" :max="scope.row.blankCount" :controls="false" style="width: 100px" />  / {{ scope.row.blankCount }}
            </template>
          </el-table-column>

          <el-table-column label="论述题数量" align="center" >
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.discuss" :min="0" :max="scope.row.discussCount" :controls="false" style="width: 100px" />  / {{ scope.row.discussCount }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <div style="margin-top: 20px">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button type="info" @click="routeBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import _ from "lodash"
import request from '@/request'


export default {
  name: 'PaperDetail',
  data() {
    return {
      // 题库
      repoList: [],
      querys: { name: '' },
      keys: ['radio', 'multi', 'blank', 'discuss']
    }
  },

  created() {
    const id = this.$route.params.id
    if (typeof id !== 'undefined') {
      this.getCount(id).then(attrs=>{
        this.repoList.push(_.merge({
          radio: 0, multi: 0, blank: 0, discuss: 0,
          name: this.$route.params.name,
          id: this.$route.params.id
        }, attrs))
      })
    }

    // this.repoList.push({  radioCount: 0, multiCount: 0, blankCount: 0})
  },
  methods: {
    // async init(id){
    //   var subject = 
    // },
    getCount(id){
      return new Promise((res,rej)=>{
        request({ 
          method: 'get', url: `/question/query/count`, params: { id }
        }).then(response=>{
          var data = response.data.data
          var keyMap = {
              0: 'radioCount',
              1: 'multiCount',
              2: 'blankCount',
              3: 'discussCount'
          }
          var attrs = {}
          for(var k in data){
            attrs[keyMap[k]] = data[k]
          }
          res(attrs)
        })
      })
    },

    handleSave() {
      var count = _.sum(this.keys.map(key=>{ this.repoList[0][key] }))
      if(count===0){
        this.$notify({
          title: '提示信息',
          message: '考试题库选择不正确！',
          type: 'warning',
          duration: 2000
        })
        return
      }

      this.$confirm('确实要提交保存吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitForm()
        this.routeBack()
      })
    },

    routeBack() {
      this.$router.push({ name: 'Subjects' })
    },

    submitForm() {
      var questions = { }
      this.keys.map(k=>questions[k]=this.repoList[0][k])
      request({ 
        method: 'post', url: '/subject/update', 
        data: {
          id: this.repoList[0].id,
          name: this.repoList[0].name,
          questions: JSON.stringify(questions)
        }
      }).then(response=>{
        this.$notify({
          title: '提示信息',
          message: '提交成功',
          type: 'success',
          duration: 2000
        })
      })

    },

  }
}
</script>

<style scoped>

</style>

